<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8" />
    <title>模板语法</title>
    <!--引入Vue-->
    <!--创建Vue对象-->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

    <!--准备好一个容器-->

    <div id="root">
        <h1>插值语法</h1>
        <h2>你好， {{name}}！</h2>
        <div>{{school.name1}}</div>
        <div>{{school.name2}}</div>
        </hr>
        <h1>指令语法</h1>
        <a v-bind:href="url">点我去百度</a>
        <div :x ='1 + 1'>
            测试:指令语法解析标签中的属性后边的js表达式
        </div>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建vue实例
        //配置对象表示在创建实例的时候向其中添加{}对象参数
        new Vue({
            el: '#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: {
                name: 'World',
                url:'https://www.baidu.com',
                school:{
                    name1:"test1",
                    name2:"test2"
                }
            }
        })

    </script>



</body>


</html>